---
title: Neon Gradient Card
date: 2024-05-26
description: A beautiful neon card effect
author: nyxb
published: true
---

<ComponentPreview name="neon-gradient-card-demo" />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx nyxb@latest add neon-gradient-card
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="neon-gradient-card" />

<Step>Update the import paths to match your project setup.</Step>

<Step>Update `tailwind.config.js`</Step>

Add the following animations to your `tailwind.config.js` file:

```js title="tailwind.config.js" {5-14}
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      animation: {
        "background-position-spin":
          "background-position-spin 3000ms infinite alternate",
      },
      keyframes: {
        "background-position-spin": {
          "0%": { backgroundPosition: "top center" },
          "100%": { backgroundPosition: "bottom center" },
        },
      },
    },
  },
};
```

</Steps>

</TabsContent>

</Tabs>

## Props

| Prop         | Type      | Description                                   | Default                                             |
| ------------ | --------- | --------------------------------------------- | --------------------------------------------------- |
| className    | string    | The class name to be applied to the component | -                                                   |
| children     | ReactNode | Children elements                             | -                                                   |
| borderSize   | number    | The size of the border                        | 5                                                   |
| borderRadius | number    | The size of the radius                        | 20                                                  |
| neonColors   | object    | The colors of the neon gradient               | `{ firstColor: "#ff00aa", secondColor: "#00FFF1" }` |
